<template>
	<view>
		<view class="wrap-comment-list">
			<view class="wrap-comment-num f-26">共 {{ commentNum }} 条评论</view>

			<view class="wrap-list">
				<block v-for="(item, index) in list" :key="index">
					<view class="item flex">
						<image class="avatar" :src="$getImageURL(item.user.avatar)" />

						<view class="info flex column">
							<view class="nickname-zan flex align-center just-between">
								<view class="user flex align-center">
									<view class="nickname limit-num-line f-26">{{ item.user.nickname }}</view>
								
									<view class="auth f-22" v-if="item.is_author == 1">作者</view>
								</view>

								<view class="zan-bg flex align-center" @click="onZanComment(index, -1)">
									<image
										class="img"
										v-if="item.is_like === 0"
										:src="$staticImagePath('article/zan.png')"
									/>
									<image class="img" v-else :src="$staticImagePath('article/zan_select.png')" />

									<view class="f-22">{{ item.like_count }}</view>
								</view>
							</view>

							<view class="content f-26">{{ item.content }}</view>

							<image
								class="content-img"
								mode="widthFix"
								v-if="item.images !== ''"
								:src="$getImageURL(item.images)"
								@click="$filters.onPreviewImage([item.images], 0)"
							/>

							<view class="time-reply-bg flex align-center">
								<view class="time f-24">{{ item.createtime_text }}</view>

								<view class="reply f-24" @click="onReply(index, -1)">回复</view>
							</view>

							<view class="reply-list" v-if="item.pids.length > 0">
								<block v-for="(subItem, idx) in (item.pack === true ? item.pids.slice(0, 1) : item.pids)" :key="idx">
									<view class="reply-item">
										<view class="user-info flex align-center just-between">
											<image class="mini-avatar" :src="$getImageURL(subItem.user.avatar)" />

											<view class="user flex align-center">
												<view class="nickname limit-num-line f-26">{{ subItem.user.nickname }}</view>

												<view class="auth f-22" v-if="subItem.is_author == 1">作者</view>
											</view>

											<view class="zan-bg flex align-center" @click="onZanComment(index, idx)">
												<image
													class="img"
													v-if="subItem.is_like === 0"
													:src="$staticImagePath('article/zan.png')"
												/>
												<image
													class="img"
													v-else
													:src="$staticImagePath('article/zan_select.png')"
												/>

												<view class="f-22">{{ subItem.like_count }}</view>
											</view>
										</view>

										<view class="reply-content-info flex column">
											<view class="content f-26">
												<text>回复</text>
												<text class="aaa">{{ subItem.to.nickname }}</text>
												<text>：{{ subItem.content }}</text>
											</view>
											
											<image
												class="content-img"
												mode="widthFix"
												v-if="subItem.images !== ''"
												:src="$getImageURL(subItem.images)"
												@click="$filters.onPreviewImage([subItem.images], 0)"
											/>

											<view class="time-reply-bg flex align-center">
												<view class="time f-24">{{ subItem.createtime_text }}</view>

												<view class="reply f-24" @click="onReply(index, idx)">回复</view>
											</view>
										</view>
									</view>
								</block>
								
								<view class="show-hidden-bg flex align-center just-between" v-if="item.children_num > 1">
									<view>
										<block v-if="item.hasShow">
											<!-- 已经打开过了 -->
											<block v-if="item.pack === true">
												<view class="btn-bg flex align-center" @click="onShowComment(index)">
													<view class="f-26">展开更多评论</view>
													
													<image class="img" :src="$staticImagePath('article/comment_arrow.png')" />
												</view>
											</block>
											
											<block v-else>
												<view class="btn-bg flex align-center" v-if="item.pids.length < item.children_num" @click="onShowMoreComment(index)">
													<view class="f-26">展开更多评论</view>
													
													<image class="img" :src="$staticImagePath('article/comment_arrow.png')" />
												</view>
											</block>
										</block>
										
										<!-- 没打开过的 -->
										<block v-else>
											<view class="btn-bg flex align-center" v-if="item.pids.length < item.children_num" @click="onShowMoreComment(index)">
												<view class="f-26">展开更多评论</view>
												
												<image class="img" :src="$staticImagePath('article/comment_arrow.png')" />
											</view>
										</block>
									</view>
								
									<view class="btn-bg flex align-center" v-if="item.pack !== true" @click="onPackComment(index)">
										<view class="f-26">收起</view>
								
										<image class="img trans" :src="$staticImagePath('article/comment_arrow.png')" />
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>

		<wanl-empty v-if="list.length === 0" text="暂无评论" />
	</view>
</template>

<script>
	import { GetArticleComment, GetCommentReplyContent, LikeComment } from "@/API/article.js";
	export default {
		props: {
			/**
			 * 文章id
			 */
			articleID: {
				type: String,
				default: "",
			},
			/**
			 * 评论数量
			 */
			commentNum: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
				page: 1,
				total: 0,
				list: [],
			};
		},
		mounted() {
			this.onRefresh();
		},
		methods: {
			/**
			 * 展开更多评论
			 */
			onShowMoreComment(index) {
				const item = this.list[index];
				item.pack = false;
				item.hasShow = true;
				
				GetCommentReplyContent(item.id, this.articleID, item.page).then(res => {
					const list = res.data.data;
					this.list[index].pids = this.list[index].pids.concat(list);
					this.list[index].page++;
				})
			},
			/**
			 * 收起
			 */
			onPackComment(index) {
				this.list[index].pack = true;
			},
			/**
			 * 展开评论
			 */
			onShowComment(index) {
				this.list[index].pack = false;
			},
			/**
			 * 点赞
			 */
			onZanComment(index, idx) {
				const item = this.list[index];
				
				var commentID = item.id;
				if (idx > -1) {
					const subItem = item.pids[idx];
					commentID = subItem.id;
				}
				
				LikeComment(this.articleID, commentID).then(res => {
					this.$st.success(res.msg, () => {
						if (idx === -1) {
							item.is_like = res.data.is_like;
							item.like_count = res.data.like_num;
						} else {
							item.pids[idx].is_like = res.data.is_like;
							item.pids[idx].like_count = res.data.like_num;
						}
					})
				})
			},
			/**
			 * 回复
			 */
			onReply(index, idx) {
				const item = this.list[index];
				var data = item;
				if (idx > -1) {
					data = item.pids[idx];
				} 
				var obj = {
					name: data.user.nickname,
					toID: data.user.id,
					pid: data.id
				}
				this.$emit("onReply", obj);
			},
			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1;
				this.getData();
			},
			/**
			 * 加载更多
			 */
			onLoadMore() {
				if (this.list.length < this.total) {
					this.page++;
					this.getData();
				}
			},
			/**
			 * 网络请求
			 */
			getData() {
				GetArticleComment(this.articleID, this.page).then((res) => {
					var list = res.data.data;
					this.total = res.data.total;

					list.forEach((item) => {
						item.page = 1;
						item.hasShow = false;
						item.pack = true;
					});

					if (this.page === 1) {
						this.list = list;
					} else {
						this.list = this.list.concat(list);
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-comment-list {
		padding-top: 20rpx;
		width: 100%;
		overflow: hidden;

		.wrap-comment-num {
			color: #888888;
		}

		.wrap-list {
			margin-top: 40rpx;
			width: 100%;
			overflow: hidden;

			.item {
				width: 100%;
				overflow: hidden;
				margin-bottom: 20rpx;
				gap: 20rpx;

				&:last-child {
					margin-bottom: 0rpx;
				}

				.info {
					flex: 1;
					overflow: hidden;
					padding-bottom: 30rpx;
					border-bottom: 2rpx solid #eeeeee;
					gap: 20rpx;

					.nickname-zan {
						width: 100%;
						overflow: hidden;
						gap: 20rpx;
					}

					.reply-list {
						width: 100%;
						overflow: hidden;

						.reply-item {
							width: 100%;
							overflow: hidden;
							margin-bottom: 20rpx;

							&:last-child {
								margin-bottom: 0rpx;
							}

							.user-info {
								width: 100%;
								overflow: hidden;
								gap: 13rpx;
							}

							.reply-content-info {
								margin-top: 15rpx;
								width: 100%;
								padding-left: 59rpx;
								overflow: hidden;
								box-sizing: border-box;
								gap: 25rpx;

							}
						}

						.show-hidden-bg {
							width: 100%;
							padding-left: 59rpx;
							box-sizing: border-box;
							overflow: hidden;
							
							.btn-bg {
								gap: 10rpx;
								color: #1d2c59;
								
								.img {
									width: 20rpx;
									height: 12rpx;
								}
								.trans {
									transform: rotate(180deg);
								}
							}
						}
					}
				}

				.mini-avatar {
					width: 46rpx;
					height: 46rpx;
					border-radius: 50%;
					overflow: hidden;
				}

				.avatar {
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
					overflow: hidden;
				}
				
				.user {
					flex: 1;
					overflow: hidden;
					gap: 13rpx;
					
					.nickname {
						--limit-num: 1;
						color: #888888;
					}
					
					.auth {
						height: 30rpx;
						line-height: 30rpx;
						text-align: center;
						background: linear-gradient(to right, #f49355, #dd551b);
						border-radius: 15rpx;
						overflow: hidden;
						padding: 0 10rpx;
						color: white;
					}
				}
				
				.content {
					width: 100%;
					overflow: hidden;
					line-height: 42rpx;
					color: #252525;
					
					.aaa {
						margin-left: 10rpx;
						color: #888888;
						margin-right: 10rpx;
					}
				}
				
				.content-img {
					width: 240rpx;
					height: auto;
					overflow: hidden;
				}
				
				.zan-bg {
					gap: 15rpx;
					color: #666666;

					.img {
						width: 30rpx;
						height: 30rpx;
					}
				}

				.time-reply-bg {
					width: 100%;
					overflow: hidden;
					gap: 11rpx;

					.time {
						color: #888888;
					}

					.reply {
						color: #464646;
					}
				}
			}
		}
	}
</style>
